import moment from 'moment'
export default{
  data(){
    const chartStyle1 = {
      new:{
        borderColor:'#3074FF',
        colorStops:['rgba(48, 116, 255, 0.5)','rgba(48, 116, 255, 0)'],
      },
      old:{
        borderColor:'#FD504D',
        colorStops:['rgba(253, 80, 77, 0.5)','rgba(253, 80, 77, 0)'],
      }
    }
    const chartStyle2 = {
      new:{
        borderColor:'#2AF256',
        colorStops:['rgba(38, 234, 156, 0.5)','rgba(38, 234, 156, 0)']
      },
      old:{
        borderColor:'#FF6F02',
        colorStops:['rgba(253, 171, 62, 0.5)','rgba(253, 171, 62, 0)']
      }
    }
    const markArea = {
      data: [ 
        [{
          name: '活动期间',
          xAxis: ''
        },{
          xAxis: ''
        }]
      ],
      itemStyle:{
         color: 'rgb(255, 201, 149, 0.5)',
      },
      label:{
        color: '#FF2020'
      }   
    }
    return{
      xChartData: [],
      chartData1:[
        {
          name: '新客数',
          data: [],
          borderColor: chartStyle1.new.borderColor,
          colorStops: chartStyle1.new.colorStops,
          markArea
        },
        {
          name: '老客数',
          data: [],
          borderColor: chartStyle1.old.borderColor,
          colorStops: chartStyle1.old.colorStops
        }
      ],
      chartData2:[
        {
          name: '新客单量',
          data: [],
          borderColor: chartStyle1.new.borderColor,
          colorStops: chartStyle1.new.colorStops,
          markArea
        },
        {
          name: '老客单量',
          data: [],
          borderColor: chartStyle1.old.borderColor,
          colorStops: chartStyle1.old.colorStops
        }
      ],
      chartData3:[
        {
          name: '新客营业额',
          data: [],
          borderColor: chartStyle2.new.borderColor,
          colorStops: chartStyle2.new.colorStops,
          markArea
        },
        {
          name: '老客营业额',
          data: [],
          borderColor: chartStyle2.old.borderColor,
          colorStops: chartStyle2.old.colorStops
        }
      ],
      chartData4:[
        {
          name: '新客升数',
          data: [],
          borderColor: chartStyle1.new.borderColor,
          colorStops: chartStyle1.new.colorStops,
          markArea
        },
        {
          name: '老客升数',
          data: [],
          borderColor: chartStyle1.old.borderColor,
          colorStops: chartStyle1.old.colorStops
        }
      ]
    }
  },
  methods: {
    //初始化数据
    initEchartData(allData,start,end){
      const xStart =  moment(start).format('YYYY-MM-DD')
      const xEnd =  moment(end).format('YYYY-MM-DD')
      const today =  moment().startOf('day').valueOf()
      let xData = []  
      let dataNew = {
        y1: [],
        y2: [],
        y3: [],
        y4: []
      }
      let dataOld = {
        y1: [],
        y2: [],
        y3: [],
        y4: []
      }
      allData.forEach(item=>{
        xData.push(item.wdDay)
        let tempDay = moment(item.wdDay).startOf('day').valueOf()
        // 只获取当前时间前一天的数据，后续日期数据不展示
        if(tempDay < today){
          //用户
          dataNew.y1.push(item.newUserNum)
          dataOld.y1.push(item.oldUserNum)
          //订单量
          dataNew.y2.push(item.newOrderNum)
          dataOld.y2.push(item.oldOrderNum)
          //营业额
          dataNew.y3.push(item.newUserAmount)
          dataOld.y3.push(item.oldUserAmount)
          //升数
          dataNew.y4.push(item.newOilLiter)
          dataOld.y4.push(item.oldOilLiter)
        }else{
          for(let i=1;i<5;i++){
            dataNew['y'+i].push(null)
            dataOld['y'+i].push(null)
          }
        }
      })
      //设置X轴
      this.xChartData = xData
      //设置活动期间遮罩区域
      this.initMarkAreaTime(xStart,xEnd)
      //设置Y轴
      for( let i=1; i<5; i++ ){
        this.$data[`chartData${i}`][0].data = dataNew[`y${i}`]
        this.$data[`chartData${i}`][1].data = dataOld[`y${i}`]
      }
    },
    //初始化活动时间 (进入到此，一定是进行中或结束的活动)
    initMarkAreaTime(xStart,xEnd){
      //容错处理，若x轴不存在活动的开始和截止时间，置为空，不显示
      if(!(this.xChartData.includes(xStart) && this.xChartData.includes(xEnd))) return
      //设置开始时间
      this.chartData1[0].markArea.data[0][0].xAxis = xStart
      //设置结束时间
      this.chartData1[0].markArea.data[0][1].xAxis = xEnd
    }
  }
}